<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .list{
            border: 1px solid #999;
            padding: 20px;
        }
        .list > .title{
            font-weight: bold;
            background-color: #dedede;
            padding: 4px;
        }
        .list > .info{
            font-size: 14px;
            margin-bottom: 10px;
            background-color: #ededed;
            padding: 4px;
            text-indent: 20px;
        }
    </style>
</head>
<body>

    <div id="app">
        <h4> template 辅助标签 </h4>
        <!-- 
            template 标签是vue提供的内容包裹标签，用于完成元素的统一结构定义实现循环判断；
            但在vue中 template 并不是一个页面渲染标签，所以在vue完成模板解析后，该标签会被删除;
            因此被该标签包裹的元素和原始父元素之间不会发生结构变化
        -->
        <div class="list">
            <!-- <div class="title">列表名称</div>
            <div class="info">列表内容</div>
            <div class="title">列表名称</div>
            <div class="info">列表内容</div> -->
            
            <template v-for="item in listText">
                <div class="title">{{ item.title }}</div>
                <div class="info">{{ item.info }}</div>
            </template>

        </div>

        <h4> key 辅助属性 </h4>
        <!-- 
        v-for的渲染特性：
            1. 默认特性：就近渲染原则
            2. 元素内容匹配特性：让元素标签始终关联数据【通过key实现】
        
        key 属性是vue提供辅助功能属性，可以为 v-for 和 v-if 提供关联关键字
            + key 属性如果需要生效，必须为其提供全页面唯一取值
            + v-for使用key属性时，绑定下标作为属性取值，和没有定义key功能一样
        
        v-for 和 key 同时定义 【 v-for 为什么需要配合key进行使用？ 】
            + 页面元素和数据的关联同步
            + 提供v-for指令在循环时页面的渲染效率
        -->
        <input type="button" value="标题添加" @click="addTextItem()">
        <ul>
            <li v-for="(text,index) in texts" :key="text">
                <input type="checkbox">
                {{ text }}
            </li>
        </ul>
    </div>

    <script src="../assets/mock/mock.js"></script>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    listText:Mock.mock({
                        "list|6":[
                            {
                                title:"@ctitle",
                                info:"@cparagraph"
                            }
                        ]
                    }).list,
                    texts:Mock.mock({
                        "list|6":[ "@ctitle" ]
                    }).list
                }
            },
            methods:{
                addTextItem(){
                    // this.texts.push( Mock.mock("@ctitle") )
                    this.texts.unshift( Mock.mock("@ctitle") )
                }
            }
        }).mount("#app")
    </script>

</body>
</html>